<script setup>
import { ref, triggerRef, shallowRef } from 'vue';

const ref_a = ref("aaa")
const ref_obj_a = ref({ a: 1, b: 2 })
const ref_obj_b = shallowRef({ a: 1, b: 2 })
const doSubmit = () => {
    console.log("doSubmit a", ref_a)
    console.log("doSubmit ref_obj_a", ref_obj_a)
    console.log("doSubmit ref_obj_b", ref_obj_b)
}
const doChange = () => {
    ref_obj_a.value.a = 2
}
const doChange2 = () => {
    // ref_obj_b.value.a = 2
    // // 强制更新ref_obj_b到view
    // triggerRef(ref_obj_b)  

    ref_obj_b.value={ a: 2, b: 2 }
    // 不需要triggerRef 更新只到value层，不会更下一层
}
</script>
<template>
    <div>
        <input type="text" v-model="ref_a" /><button @click="doSubmit">查看</button>
        <br>
        {{ ref_a }}
        <hr>
        {{ ref_obj_a }}   {{ ref_obj_a.a }}
        <br>
        <button @click="doChange">提交</button>
        <hr>
        {{ ref_obj_b }}
        <br>
        <button @click="doChange2">提交</button>
    </div>
</template>
<style scoped></style>